<script setup name="pageOperationLogs">
import { ref, onMounted } from 'vue'
import resize from '@/views/admin/layout/mixin/resize'
import * as funUser from '@/apis/system/user'
import moment from "moment"
import Detail from "./components/operationLogsDetail.vue"

const deviceIsPc = computed(() => {
    return resize.getIsPc()
})
// 查询条件
const listQuery = ref({
    keywords: "",
    beginDate: "",
    endDate: "",
    page: 1,
    size: $Common.appPageSize
})
const tableData = ref([])
const isPagination = ref(false)
const total = ref(0)
const selectedTime = ref([])
const pageSizes = $Common.appPageSizes
const tableDateFormat = $Common.tableDateFormat

// 初始化数据
onMounted (() => {
    getListData()
})

// 分页查询
const handleSizeChange = (val) => {
    $Common.fullLoading()
    listQuery.value.size = val
    getListData()
}
const handleCurrentChange = (val) => {
    $Common.fullLoading()
    listQuery.value.page = val
    getListData()
}

// 查询数据
const getListData = async () => {
    $Common.fullLoading()
    funUser.getAuditLogs(listQuery.value).then(response => {
        $Common.closeFullLoading()
        total.value = response.totalCount || 0
        isPagination.value = response.totalCount > 0 || false
        if (response && response.items && response.items.length > 0) {
            tableData.value = response.items.map(item => {
                let names = item.actions.map(x => {
                    return x.serviceName
                })
                item.serviceName = names.join("<br />")
                return item
            })
        } else {
            tableData.value = []
        }
    })
}

const _search = () => {
    listQuery.value.page = 1
    getListData()
}

const refOperationLogsDetail = ref(null)
const _query = (row) => {
    refOperationLogsDetail.value.open(row)
}
</script>

<template>
    <div class="page-operationlogs">
        <el-table :data="tableData" size="large" border @row-dblclick="_query">
            <el-table-column label="操作者" prop="userName" min-width="100"></el-table-column>
            <el-table-column label="URL" prop="url" min-width="150">
                <template #default="scope">
                {{ scope.row.url }}
                ({{ scope.row.httpMethod }})
                </template>
            </el-table-column>
            <el-table-column label="状态码" width="120">
                <template #default="scope">
                {{ scope.row.httpStatusCode }}
                <el-tag type="danger" v-if="scope.row.exceptions">异常</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作者IP" prop="clientIpAddress" width="120"></el-table-column>
            <el-table-column label="操作时间" prop="executionTime" :formatter="tableDateFormat" min-width="100"></el-table-column>
            <el-table-column label="Tag" width="250">
                <template #default="scope">{{ scope.row.extraProperties && scope.row.extraProperties.Tag }}</template>
            </el-table-column>
            <el-table-column label="操作" width="100" :fixed="deviceIsPc ? 'right' : false">
                <template #default="scope">
                    <el-button type="primary" plain @click="_query(scope.row)">详情</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" 
                :current-page="listQuery.page" :page-sizes="pageSizes" :page-size="listQuery.size" 
                :hide-on-single-page="false" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>

        <!--操作日志详情-->
        <Detail ref="refOperationLogsDetail"></Detail>
    </div>
</template>

<style lang="scss" scoped>
.page-operationlogs {}
</style>